<template>
  <div class="floor flex" :class="{ 'accepted-answer': acceptedAnswer }">
    <div v-if="acceptedAnswer" class="accepted-answer-state">已采纳</div>
    <div class="avatar-container shrink-0">
      <el-avatar :src="item.author.avatar" :size="40" />
    </div>
    <div class="con m-l-16 flex-1">
      <div class="flex align-items-center">
        <router-link :to="`/users/${item.author.id}`" class="title link" target="_blank">
          {{ item.author.nickname }}
        </router-link>
        <answer-timeago :item="item" class="m-l-16" />
        <span
          v-if="item.author.id === curUser.id && !editing"
          class="m-l-auto link el-link--primary m-r-16"
          @click="editing = true"
        >编辑</span>
      </div>
      <content-show-edit
        :item="item"
        :editing.sync="editing"
        @updated="handleUpdated"
        style="position: relative; z-index: 1;"
      />
      <div v-if="!editing" class="flex align-items-center" style="position: relative; z-index: 2;">
        <vote-like :comment="item" @voted="handleUpdated" />
        <vote-dislike :comment="item" @voted="handleUpdated" />
        <accept-answer v-if="isSpaceOwner || isSpaceAdmin || isIssueAuthor" :comment="item" />
        <span class="m-l-30 info pointer" @click="replyAnswer">评论</span>
        <span class="m-l-16"></span>
        <vote-collection :comment="item" @voted="handleUpdated" />
      </div>
      <comments-list
        ref="commentsList"
        :cur-answer="item"
        style="position: relative; z-index: 3;"
      />
    </div>
  </div>
</template>

<script>
import { mapState, mapGetters } from 'vuex';
import AnswerTimeago from './answer-timeago';
import ContentShowEdit from './content-show-edit';
import VoteLike from './vote-like';
import VoteDislike from './vote-dislike';
import VoteCollection from './vote-collection';
import ListToggleButton from '../sub-comments/list-toggle-button';
import CommentsList from '../sub-comments/comments-list';
import AcceptAnswer from './accept-answer';

export default {
  name: 'answers-list-item',
  components: {
    AnswerTimeago,
    ContentShowEdit,
    VoteLike,
    VoteDislike,
    VoteCollection,
    ListToggleButton,
    CommentsList,
    AcceptAnswer,
  },
  props: {
    answer: Object,
  },
  data() {
    return {
      item: this.answer,
      editing: false,
      replying: false,
    };
  },
  computed: {
    ...mapState({
      curUser: 'currentUser',
      curIssue: 'currentIssue',
    }),
    ...mapGetters(['isSpaceOwner', 'isSpaceAdmin', 'isIssueAuthor']),
    acceptedAnswer() {
      return this.curIssue.acceptedComment.id === this.item.id;
    },
  },
  methods: {
    handleUpdated(item) {
      Object.assign(this.item, item);
    },
    replyAnswer() { this.$refs.commentsList.handleReplyAnswer(); },
  },
};
</script>

<style lang="scss">
.floor {
  >.avatar-container {
    margin-top: 1.5rem;
    margin-left: .75rem;
  }

  >.con {
    position: relative;
    overflow: hidden;
    border-top: 1px solid #e5e5e5;
    padding-top: 1.5rem;
    padding-bottom: 1rem;
    min-width: 0;
  }
}
.floor:last-child>.con { border-bottom: 1px solid #e5e5e5; }

.floor.accepted-answer {
  >.avatar-container { margin-top: calc(1.5rem + 2rem); }
  >.con { padding-top: calc(1.5rem + 2rem); }
  >.accepted-answer-state {
    position: absolute;
    top: 0.5rem;
    padding: .5rem 2rem .5rem 1rem;
    color: #fff;
    background-color: #67c23a;
    border-radius: 2px;
    font-size: 12px;
    line-height: 1;
    &::after {
      display: block;
      width: 28px;
      height: 28px;
      content: '';
      position: absolute;
      top: 0;
      left: 4.5rem;
      background-color: #fff;
      transform: rotate(45deg);
    }
  }
}

.sub-floors { min-height: 3rem; }
</style>
